<style scope lang="less">
.area-blk{
    background: #034699;
    .iconfont{
        font-size: 14px;
        line-height: 1;
    }
}
.led-tab{
    display: inline-flex;
    border-bottom: 1px solid rgba(175, 236, 255, .46);
    margin-bottom: 20px;
    color: #BFDFF7;
    font-size: 16px;
    .item{
        display: block;
        height: 40px;
        padding: 0 10px;
        line-height: 40px;
        .iconfont{
            font-size: 16px;
        }
        &.active{
            border-bottom: 3px solid #BFDFF7;
        }
        &:not(:first-child){
            margin-left: 9px;
        }
    }
}
.led-right{
    padding: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}
.led-main{
    flex:1;
    overflow: auto;
    padding: 0;
    // padding: 30px;
    // background: rgba(0, 0, 0, 0.2);
}
.custom-tree-node{
	position: relative;
	color: #BFDFF7;
	&.active{
		color: #3F95FF;
	}
	.none{
		color:#aaa;
        cursor: default;
	}
}
</style>
<template>
	<div class="page-census page-record">
		<div class="crumbs">
			<router-link to="/">首页</router-link> / <span class="active">智慧融媒体</span>
		</div>
		<el-container :style="{height: mainH+'px'}">
		  	<el-aside class="area-blk flex column" width="240px">
		  		<h2 class="hd"><i class="iconfont icon-area"></i> 行政区域</h2>
                <areaTree class="flex-1" style="overflow:auto" @nodeClick="areaClickAction"></areaTree>
		  	</el-aside>
              <el-aside class="area-blk flex column ml-10" width="240px">
		  		<h2 class="hd"><el-checkbox v-model="allCompanyChecked" @change="checkAllCompany" v-if="activeTab==1" /> <i class="iconfont icon-enterprise"></i> 企业列表</h2>
                <div class="unit-search flex mt-10">
		  			<el-input class="flex-1" placeholder="请输入关键字" v-model.trim="keyword"></el-input>
		  		</div>
                <div class="flex-1" style="overflow:auto" v-loading="companyLoading">
                    <el-tree
                        ref="companyTree"
                        :props="defaultProps"
                        @node-click="handleCompanyClick"
                        unselectable="on"
                        :expand-on-click-node="true"
                        :indent="36"
                        :load="loadNode"
                        node-key="id"
						lazy
                        :show-checkbox="activeTab==1"
                        :check-on-click-node="activeTab==1"
						:render-content="renderContent"
                        :filter-node-method="filterNode"
                        @check-change="handleCheckChange"
                        v-if="companyList.length>0">
                            <!-- <div class="tree-node" :class="{active: activeNodeId==node.id}" slot-scope="{ node, data }">{{ data.name }}</div> -->
                        </el-tree>
                    <div class="data-none" v-else>暂无数据</div>
                </div>
                
		  	</el-aside>
		  	<el-main class="led-right">
                <div>
                    <div class="led-tab">
                        <a class="item" :class="{active:activeTab==0}" @click="changeTab(0)" href="javascript:;"><i class="iconfont icon-list"></i> 预览</a>
                        <a class="item" :class="{active:activeTab==1}" @click="changeTab(1)" href="javascript:;"><i class="iconfont icon-publish-fill"></i> 发布</a>
                    </div>
                </div>
                <div class="led-main">
                    <template v-if="activeTab==0">
                        <preview ref="preview" :companyId="activeCompanyId" :type="activeType"></preview>
                    </template>
                    
                    <template v-if="activeTab==1">
                        <list ref="list" v-if="activeCompanyIds.length>0" :companyIds="activeCompanyIds" :companyId="activeCompanyId"></list>
                        <div class="mt-20 text-center" v-else>
                            请选择企业设备类型
                        </div>
                    </template>
                </div>
		  	</el-main>
		</el-container>
	</div>
</template>
<script>
let isAllCheckChange = false
var oldCompanyList = []
import { mapState } from 'vuex'
import list from '@/components/led/list.vue'
import preview from '@/components/led/preview.vue'
import areaTree from '@/components/census/AreaTree.vue'
export default {
	name: 'Led',
	props: {
		winH: {
			type: Number,
			default: 500
		}
	},
	components: {
		list,
        preview,
		areaTree
	},
	data () {
		return {
            activeTab:0,
			area: '', //行政区划ID
            companyList: [],
            defaultProps: {
			  children: 'children',
			  label: 'name',
              isLeaf: 'leaf'
			},
			activeNodeId: '',
            defaultExpandedKeys: [],
            companyLoading: false,
            activeCompanyId: '',
            activeType: '',
            deviceTypeList:[],
            activeDeviceId: '',
            keyword: '',
            activeCompanyIds:[],
            allFilterCompanyIds: [],
            allCompanyChecked: false
		}
	},
	watch: {
      	keyword(val) {
            let keys = []
            this.companyList.forEach(item=>{
                if(this.keyword){
                    if(item.name.indexOf(this.keyword) !== -1){
                        keys.push(item.id)
                    }
                }else{
                    keys.push(item.id)
                }
                
            })
            this.allFilterCompanyIds = keys
        	this.$refs.companyTree.filter(val);
      	},
        activeCompanyIds (val) {
            this.allCompanyChecked = this.allFilterCompanyIds.length==this.activeCompanyIds.length
        },
        allFilterCompanyIds () {
            this.allCompanyChecked = this.allFilterCompanyIds.length==this.activeCompanyIds.length
        },
    },
	computed: {
		...mapState([
			'scale',
            'siteInfos'
		]),
		mainH () {
			return this.winH-200
		}
	},
	methods: {
        checkAllCompany () {
            isAllCheckChange = true
            setTimeout(()=>{
                isAllCheckChange = false
            },500)
            if (this.allCompanyChecked) {
                //全选
                let keys = []
                this.companyList.forEach(item=>{
                    if(this.keyword){
                        if(item.name.indexOf(this.keyword) !== -1){
                            keys.push(item.id)
                        }
                    }else{
                        keys.push(item.id)
                    }
                    
                })
                this.$refs.companyTree.setCheckedKeys(keys);
                this.activeCompanyIds = keys
                
            }else{
                //取消选中
                this.$refs.companyTree.setCheckedKeys([]);
                this.activeCompanyIds = []
            }
        },
        handleCheckChange(data, checked, indeterminate) {
            if(isAllCheckChange) return
            if(checked){
                this.activeCompanyIds.push(data.id)
            }else{
                let index = this.activeCompanyIds.indexOf(data.id)
                if(index>=0){
                    this.activeCompanyIds.splice(index,1)
                }
                
            }
        },
        filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
        renderContent(h, { node, data, store }) {
			if(data.type=='none'){
                return ( <span class="custom-tree-node">
                    <span class="none">{data.name}</span>
                </span> );
            }else if ((this.activeTab==1 && this.activeNodeId == node.id) || (this.activeTab==0 && data.isActive)){
                return (<span class="custom-tree-node active">
                    <span>{data.name}</span>
                </span> )
            }else{
                return ( <span class="custom-tree-node">
                    <span>{data.name}</span>
                </span> );
            }
			
      	},
        loadNode(node, resolve) {
			if (node.level === 0) {
                resolve(this.companyList);
			}else if (node.level ==1) {
                this.deviceTypeList = [{
                    name: 'IP音柱',
                    type:'ip',
                    deviceClassify: 9,
                    parentId: node.data.id,
                    leaf:this.activeTab == 1
                },{
                    name: 'LED屏',
                    type:'led',
                    deviceClassify: 8,
                    parentId: node.data.id,
                    leaf:this.activeTab == 1
                },{
                    name: '摄像头',
                    type:'monitor',
                    deviceClassify: 6,
                    parentId: node.data.id,
                    leaf:this.activeTab == 1
                }]
                resolve(this.deviceTypeList)
            }else if (node.level > 1) {
				this.getDevice(node.data.parentId, node.data.type,(list) => {
					if(list.length==0){
						resolve([{name:'暂无设备',leaf:true,type:'none'}])
					}else{
						resolve(list)
					}
					
				})
			}
		},
        getDevice (id,type,cbk) {
            // consoel.log('getdevice')
            let deviceClassify = 9
            if(type=='ip') deviceClassify = 9
            if(type=='led') deviceClassify = 8
            if(type=='monitor') deviceClassify = 6
			this.$post('/fireFightingIOT/device/deviceListNew', {
                deviceClassify: deviceClassify,
                businessId: id
            }).then(res => {
            	let data = res.data.map(item=>{
                    item.isActive = false
					item.leaf = true
                    return item
                })
                cbk && cbk(data)
            }, (err) =>{
				this.$message.error(err.msg)
            })
            
		},
        changeTab (index) {
            this.activeTab = index
            this.companyList = []
            this.activeCompanyId = ''
            this.activeCompanyIds = []
            setTimeout(()=>{
                this.companyList = oldCompanyList.map(item=>{
                    item.leaf = index==1
                    return item
                })
            },100)
        },
        getCompany (area) {
            this.allCompanyChecked = false
            this.activeCompanyIds = []
            this.companyList = []
            this.companyLoading = true
            this.$get('/business/business/businessList',{area: area}).then(res => {
                this.companyLoading = false
				this.companyList = res.data.map(item=>{
                    item.leaf = this.activeTab==1
                    return item
                })
                oldCompanyList = res.data
                this.allFilterCompanyIds = this.companyList.map(item=>item.id)
			}, (err) =>{
                this.companyLoading = false
				this.$message.error(err.msg || '系统错误');
			})
        },
		areaClickAction (data,level,areaNames) {
			this.area = data.id
			this.getCompany(data.id)
		},
        handleCompanyClick (data,node) {
            if(this.activeTab==0){
                if(node.level==3 && data.type!='none'){
                    data.isActive = true
                    this.activeCompanyId = data.businessId
                    this.activeType = this.deviceTypeList.filter(item=>{
                        return item.deviceClassify == data.deviceClassify
                    })[0].type
                    this.$nextTick(()=>{
                        this.$refs.preview.getData(data.number,this.activeType)
                    })
                }
            }else{
                if(node.level==2){
                    this.activeNodeId = node.id
                    data.isActive = true
                    this.activeCompanyId = data.parentId
                    this.activeType = data.type
                    this.$nextTick(()=>{
                        this.$refs.list.getData()
                    })
                }
                
            }
        },
	},
	created () {
        // this.getCompany()
	},
	activated () {
		
	},
	mounted () {
		
	}
}
</script>
